/*
 * @Author: hanyu 
 * @Date: 2018-05-07 09:05:24 
 * @Last Modified by: hanyu
 * @Last Modified time: 2018-05-11 09:55:57
 */
 <template>
      <div class="mapCon" :style="mapStyle"  id="map"></div>
</template>
<script>
import echarts from "echarts";
require("echarts/map/js/china.js");
import chart from "@/components/Charts/chart";
//  mapStyle: 地图的style 样式  ，value: 可用 v-model 传入路线数据数组数据  placeData: 地点数组
/** placeData = [
          {
            name: "广州",
            value: [113.72, 23.13],
            symbolSize: 2,
            itemStyle: { normal: { color: "#FCA057" } }
          },]

  areaData=[{
    name:'洛龙区',
    value:100
  }],// 区域数量多少反应在地图某个地区的背景颜色深浅，配合visualMap 使用
*/
export default {
  name: "index",
  props: {
    mapStyle: {
      type: String,
      default: () => {
        return "";
      }
    },
    value: {
      type: Array,
      default: () => {
        return [];
      }
    },
    placeData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    areaData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  components: { chart },
  watch: {
    placeData(res) {
      this.$set(this, "cityArr", res);
      this.fetchMap();
    },
    areaData(res) {
      if (res.length === 0) {
        res = [
          { name: "洛龙区", value: 100 },
          { name: "吉利区", value: 10 },
          { name: "洛宁县", value: 20 },
          { name: "孟津县", value: 30 },
          { name: "汝阳县", value: 40 },
          { name: "新安县", value: 50 },
          { name: "伊川县", value: 60 },
          { name: "宜阳县", value: 70 },
          { name: "偃师市", value: 80 },
          { name: "嵩县", value: 90 },
          { name: "栾川县", value: 100 },
          { name: "洛龙区", value: 110 },
          { name: "瀍河回族区", value: 120 },
          { name: "老城区", value: 130 },
          { name: "西工区", value: 140 },
          { name: "涧西区", value: 150 }
        ];
      }
      this.$set(this, "areaDatas", res);
      this.fetchMap;
    },
    value(res) {
      // 根据传入数据进行重组数据
      // 格式： [{fromName:'起始地',toName:'到达地',[[135.22,13.55],[133.33,56.99]]}]
      var linesData = [];
      res.forEach(item => {
        var obj = {};
        if (item.mailingLng != null && item.addresseeLng != null) {
          obj.fromName = item.mailingCity + item.mailingArea;
          obj.toName = item.addresseeCity + item.addresseeArea;
          obj.coords = [
            [item.mailingLng, item.mailingLat],
            [item.addresseeLng, item.addresseeLat]
          ];
          linesData.push(obj);
        }
      });
      this.$set(this, "linesData", linesData);
      this.initLouYang();
    }
  },
  data() {
    return {
      cyyMapTime: null,
      mapOption: {}, // 地图option
      linesData: [], // 线路坐标
      cityArr: [], // 地点坐标
      areaDatas: [] // 区域的坐标
    };
  },
  destroyed() {
    clearTimeout(this.cyyMapTime);
  },
  methods: {
    formatterLine(res, params, unit) {
      var minResult = "";
      //  params.forEach(item => {
      var minItem =
        "<div style='display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 10px'><span>" +
        params.data.fromName +
        "</span><span style='margin-top:2px;font-family:DIN Condensed Bold;font-size:20px'>" +
        params.data.toName +
        "</span></div>";
      minResult += minItem;
      //  });
      var imgConStart =
        "<div style='display:flex;padding:12pt 12pt 12pt 12pt;color:#31cee6;flex-direction:column;background:rgba(0,0,0,0.7);border-radius:10px'>" +
        "<div style='width:100%;display:flex;align-items:center;justify-content:space-between;flex-direction:row;margin-top:8pt'>";

      var result =
        minResult === ""
          ? imgConStart + "</div>"
          : imgConStart + minResult + "</div>";
      return result;
    },
    formatterAdd(res, params, unit) {
      var minResult = "";
      var topName = "<div>" + params.name + "</div>";
      var minItem = // 营业额
        "<div style='display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 10px'><span>" +
        "营业额" +
        "</span><span style='margin-top:2px;font-family:DIN Condensed Bold;font-size:20px'>" +
        params.data.netPointAmount +
        "</span></div>";
      var netPointCountItem = // 发单量
        "<div style='display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 10px'><span>" +
        "发单量" +
        "</span><span style='margin-top:2px;font-family:DIN Condensed Bold;font-size:20px'>" +
        params.data.netPointCount +
        "</span></div>";
      minResult = minItem + netPointCountItem;
      var imgConStart =
        "<div style='display:flex;padding:12pt 12pt 12pt 12pt;color:#31cee6;flex-direction:column;background:rgba(0,0,0,0.7);border-radius:10px'>" +
        topName +
        "<div style='width:100%;display:flex;align-items:center;justify-content:space-between;flex-direction:row;margin-top:8pt'>";

      var result =
        minResult === ""
          ? imgConStart + "</div>"
          : imgConStart + minResult + "</div>";
      return result;
    },
    initLouYang() {
      var url = "/410300.json";
      this.$fetch({
        url: url,
        method: "get"
      })
        .then(resData => {
          echarts.registerMap("洛阳", resData.data);
          this.fetchMap();
        })
        .catch(err => {
          console.log(err);
        });
    },
    fetchMap() {
      var allData = {
        citys: this.cityArr,
        moveLines: this.linesData
      };
      var mapOption = {
        backgroundColor: "transparent",
        visualMap: {
          show: false,
          min: 0,
          max: 200,
          top: "0",
          text: ["High", "Low"],
          seriesIndex: [1],
          inRange: {
            color: ["rgba(52,166,202,0)", "#34A6CA"]
          },
          calculable: true
        },
        legend: {
          show: false,
          orient: "vertical",
          top: "0",
          left: "right",
          data: ["地点", "线路", "111"],
          textStyle: {
            color: "#fff"
          }
        },
        geo: {
          center: [112.4608987892, 34.6649484794], // 地图中心点
          map: "洛阳",
          zoom: 5,
          left: "35%",
          top: "0%",
          roam: false,
          label: {
            normal: {
              show: true,
              color: "white"
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              borderColor: "#31cee6",
              areaColor: "transparent",
              borderWidth: 1
            },
            emphasis: {
              areaColor: "#3C73FA"
            }
          }
        },
        tooltip: {
          trigger: "item"
        },
        series: [
          {
            name: "地点",
            type: "effectScatter",
            coordinateSystem: "geo",
            symbolSize: 10,
            tooltip: {
              extraCssText: "text-align:center;background-color:transparent",
              formatter: params => this.formatterAdd(this.cityArr, params, "件")
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: "#39F3C4",
                shadowBlur: 10,
                shadowColor: "#39F3C4"
              }
            },
            zlevel: 1,
            data: allData.citys
          },
          {
            name: "categoryA",
            type: "map",
            geoIndex: 0,
            tooltip: {
              show: false
            },
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: false
              }
            },
            data: this.areaDatas
          }
          // {
          //   name: "飞机后面",
          //   type: "lines",
          //   coordinateSystem: "geo",
          //   zlevel: 1,
          //   large: true,
          //   label: {
          //     normal: {
          //       show: false
          //     },
          //     emphasis: {
          //       show: false
          //     }
          //   },
          //   effect: {
          //     show: true,
          //     period: 10,
          //     trailLength: 0.9,
          //     color: "#66F8FD",
          //     symbolSize: 3
          //   },
          //   lineStyle: {
          //     normal: {
          //       color: "#66F8FD",
          //       width: 0,
          //       curveness: 0.3
          //     }
          //   },
          //   data: allData.moveLines
          // },
          // {
          //   name: "线路",
          //   type: "lines",
          //   //  tooltip: {
          //   //            formatter: params => this.formatterLine(this.linesData, params, '件')
          //   //          },
          //   coordinateSystem: "geo",
          //   zlevel: 2,
          //   large: true,
          //   effect: {
          //     show: true,
          //     period: 10,
          //     trailLength: 0,
          //     symbol: planePath,
          //     symbolSize: 20,
          //     color: "#66F8FD"
          //   },
          //   // lineStyle: {
          //   //   normal: {
          //   //     width: 0,
          //   //     color: "#66F8FD",
          //   //     opacity: 0.4,
          //   //     curveness: 0.3
          //   //   }
          //   // },
          //   data: allData.moveLines
          // }
        ]
      };
      var self = this;
      if (this.mapChart) {
        this.mapChart.clear();
        this.mapChart.dispose();
      }
      this.cyyMapTime = setTimeout(() => {
        self.mapChart = echarts.init(document.getElementById("map"));
        self.mapChart.setOption(mapOption);
      }, 100);
    }
  }
};
</script>
<style scoped>
.mapCon {
  height: 370px;
  min-width: 772px;
  float: left;
  position: fixed;
  top: 0;
  /* left: -20px; */
}
</style>
